<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>外出签到管理系统</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="public/static/font-awesome/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="public/static/ionicons/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
          page. However, you can choose any other skin. Make sure you
          apply the skin class to the body tag so the changes take effect.  -->
    <link rel="stylesheet" href="dist/css/skins/skin-blue.min.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>

    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <!-- ./wrapper -->
    <script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
    <!-- layer -->
    <script src="public/static/layer/layer.js"></script>

    <script type="text/javascript">
        $(function(){

            var userRole = localStorage.getItem("role");
            if(userRole=='' || userRole==null){

                alert('请先登录')
                location.href="login.html";
               /// layer.msg('请先登录',{time:1500});
               // alert(555)

            }

            return false;
        });
    </script>



    <![endif]-->
</head>
<!--
BODY TAG OPTIONS:
=================
Apply one or more of the following classes to get the
desired effect
|---------------------------------------------------------|
| SKINS         | skin-blue                               |
|               | skin-black                              |
|               | skin-purple                             |
|               | skin-yellow                             |
|               | skin-red                                |
|               | skin-green                              |
|---------------------------------------------------------|
|LAYOUT OPTIONS | fixed                                   |
|               | layout-boxed                            |
|               | layout-top-nav                          |
|               | sidebar-collapse                        |
|               | sidebar-mini                            |
|---------------------------------------------------------|
-->

<body class="skin-blue sidebar-mini">

<div class="wrapper" style="height: 800px;">

    <header class="main-header">

        <!-- Logo -->
        <a href="index.html" class="logo">
            <!-- mini logo for sidebar mini 50x50 pixels -->
            <span class="logo-mini"><b>OMS</b></span><b>
            <!-- logo for regular state and mobile devices -->
            <span class="logo-lg">外出签到管理系统</span>
        </b></a><b>

        <!-- Header Navbar -->
        <nav class="navbar navbar-static-top" role="navigation">
            <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                <span class="sr-only">Toggle navigation</span>
            </a>
            <div class="navbar-custom-menu">
                <ul class="nav navbar-nav">
                    <!-- User Account Menu -->
                    <li class="dropdown user user-menu">
                        <!-- Menu Toggle Button -->
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <!-- The user image in the navbar-->
                            <img src="public/defaulthead.png" class="user-image" alt="User Image">
                            <!-- hidden-xs hides the username on small devices so only the image appears. -->
                            <span class="hidden-xs">南宫习习</span>
                        </a>
                        <ul class="dropdown-menu">
                            <!-- The user image in the menu -->
                            <li class="user-header">
                                <img src="public/defaulthead.png" class="img-circle" alt="User Image">

                                <p>
                                    技术部 - 南宫习习

                                <div style="color:rgba(255, 255, 255, 0.8)">TEL：13558758764</div>
                                </p>
                            </li>
                            <!-- Menu Body -->
                            <!-- Menu Footer-->
                            <li class="user-footer">
                                <div class="pull-right">
                                    <span id="modypwd" class="btn btn-default btn-flat">修改密码</span>
                                    <span id="loginout" class="btn btn-default btn-flat">退出</span>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <!-- Control Sidebar Toggle Button -->
                </ul>
            </div>
        </nav>
    </b></header>
    <!-- Left side column. contains the logo and sidebar -->

    <aside class="main-sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
            <!-- Sidebar user panel (optional) -->
            <div class="user-panel">
                <div class="pull-left image">
                    <img src="public/defaulthead.png" class="img-circle" alt="User Image">
                </div>
                <div class="pull-left info">
                    <p>南宫习习</p>
                    <!-- Status -->
                    <a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
                </div>
            </div>
            <!-- Sidebar Menu -->
            <ul class="sidebar-menu">
                <li class="header"></li>
                <li class="active" id="usermanager" style="cursor:pointer"><a><i class="fa fa-user"></i><span>员工管理</span></a></li>
                <li id="guij" style="cursor:pointer"><a><i class="fa fa-cab"></i> <span>外出轨迹</span></a></li>
                <li id="qiand" style="cursor:pointer"><a><i class="fa fa-edit"></i> <span>外出签到</span></a></li>
                <li id="shiswz" style="cursor:pointer"><a><i class="fa fa-map-marker"></i> <span>实时位置</span></a></li>

                <li id="phone" style="cursor:pointer; display: none"><a><i class="fa fa-mobile-phone"></i><span>手机换绑</span></a></li>
                <li id="department" style="cursor:pointer; display: none"><a><i class="fa fa-users"></i> <span>部门维护</span></a></li>
                <li id="manager" style="cursor:pointer; display: none"><a><i class="fa fa-cubes"></i> <span>管理员</span></a></li>
            </ul>
            <!-- /.sidebar-menu -->
        </section>
        <!-- /.sidebar -->
    </aside>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header" >
            <h1>
                <span id="bkname">员工管理</span>
                <small class="bkname">员工列表</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
                <li class="active bkname">员工列表</li>
            </ol>
        </section>
        <!-- Main content -->
        <section class="content" id="content">

        </section>
        <div style="clear: both"></div>
    </div>

    <footer class="main-footer">
        <div class="pull-right hidden-xs">
            <span style="color:#acacac">四川智美高科科技有限公司</span>
        </div>
        <strong>Copyright © 2017-2018 .</strong> All rights
        reserved.
    </footer>
</div>


<!-- Bootstrap 3.3.6 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/app.min.js"></script>


<script src="public/static/laydate/laydate.js"></script>

<script>
    //时间选择器
    //执行一个laydate实例
    laydate.render({
        elem: '#begintime', //指定元素
        type: 'datetime'
    });
    laydate.render({
        elem: '#endtime', //指定元素
        type: 'datetime'
    });
</script>

<script>

    $(function () {

        //默认加载页面
        ini();
        function ini() {
            //避免刷新页面
            var indexID = localStorage.getItem("indexID");
            if (indexID == 'usermanager') {
                var url = 'common/user.html';
            } else if (indexID == 'guij' || indexID == 'shiswz') {
                url = 'common/map.html';
            } else if (indexID == 'qiand') {
                url = 'common/signIn.html';
            } else if (indexID == 'phone') {
                url = 'common/modyPhone.html';
            } else if (indexID == 'department') {
                url = 'common/department.html';
            } else if (indexID == 'modypwd') {
                url = 'common/modyPWD.html';
            } else if (indexID == 'manager') {
                url = 'common/managerList.html';
            } else {
                url = 'common/user.html';
            }
            $("#content").load(url, function (response, status, xhr) {
                $("#bkname").html(localStorage.getItem("bkname"));
                $(".bkname").html(localStorage.getItem("bknameSmall"));
                $('#' + indexID).addClass("active").siblings().removeClass("active");
                $('#content').html(response);
            });
            //权限控制按钮

        }

        //点击员工管理
        $('#usermanager').on('click', function () {
            localStorage.setItem("indexID", $(this).attr('id'));
            localStorage.setItem("bkname", '员工管理');
            localStorage.setItem("bknameSmall", '员工列表');
            $("#bkname").html("员工管理");
            $(".bkname").html("员工列表");
            $("#content").html("");
            $(this).addClass("active").siblings().removeClass("active");
            $("#content").load("common/user.html");

        });

        //点击外出轨迹
        $('#guij').on('click', function () {
            localStorage.setItem("indexID", $(this).attr('id'));
            localStorage.setItem("bkname", '外出轨迹');
            localStorage.setItem("bknameSmall", '轨迹管理');
            $("#bkname").html("外出轨迹");
            $(".bkname").html("轨迹管理");
            $("#content").html("");
            $(this).addClass("active").siblings().removeClass("active");
            $("#content").load("common/map.html");
        });

        //点击外出签到
        $('#qiand').on('click', function () {
            localStorage.setItem("indexID", $(this).attr('id'));
            localStorage.setItem("bkname", '外出签到');
            localStorage.setItem("bknameSmall", '签到列表');
            $("#bkname").html("外出签到");
            $(".bkname").html("签到列表");
            $("#content").html("");
            $(this).addClass("active").siblings().removeClass("active");
            $("#content").load("common/signIn.html");
            location.reload(true);
        });

        //点击实时位置
        $('#shiswz').on('click', function () {
            localStorage.setItem("indexID", $(this).attr('id'));
            localStorage.setItem("bkname", '实时位置');
            localStorage.setItem("bknameSmall", '当前位置');
            $("#bkname").html("实时位置");
            $(".bkname").html("当前位置");
            $("#content").html("");
            $(this).addClass("active").siblings().removeClass("active");
            $("#content").load("common/map.html");
        });

        //点击手机换绑
        $('#phone').on('click', function () {
            localStorage.setItem("indexID", $(this).attr('id'));
            localStorage.setItem("bkname", '手机换绑');
            localStorage.setItem("bknameSmall", '换绑列表');
            $("#bkname").html("手机换绑");
            $(".bkname").html("换绑列表");
            $("#content").html("");
            $(this).addClass("active").siblings().removeClass("active");
            $("#content").load("common/modyPhone.html");
        });

        //点击部门维护
        $('#department').on('click', function () {
            localStorage.setItem("indexID", $(this).attr('id'));
            localStorage.setItem("bkname", '部门维护');
            localStorage.setItem("bknameSmall", '部门列表');
            $("#bkname").html("部门维护");
            $(".bkname").html("部门列表");
            $("#content").html("");
            $(this).addClass("active").siblings().removeClass("active");
            $("#content").load("common/department.html");
        });

        //点击修改密码
        $('#modypwd').on('click', function () {
            layer.open({
                type: 2,
                title: '修改密码',
                shadeClose: true,
                shade: 0.8,
                area: ['30%', '33%'],
                content: 'common/modyPWD.html' //iframe的url
            });
        });

        //点击管理员列表
        $('#manager').on('click', function () {
            localStorage.setItem("indexID", $(this).attr('id'));
            localStorage.setItem("bkname", '管理员');
            localStorage.setItem("bknameSmall", '管理员列表');
            $("#bkname").html("管理员");
            $(".bkname").html("管理员列表");
            $("#content").html("");
            $(this).addClass("active").siblings().removeClass("active");
            $("#content").load("common/managerList.html");
        });

        //退出登录
        $('#loginout').on('click', function () {
            localStorage.clear();
            location.href = "login.html";
        });

        //手机换绑 -> 审核
        $(document).on('click', '.daish', function () {
            layer.confirm('您确定要通过该审核？', {
                btn: ['确定', '取消'], //按钮
                title: '审核确认'
            }, function () {
                layer.msg('审核通过', {icon: 1, time: 1500},function(){
                    location.reload();
                });
            });
        });

        //员工管理 -> 详情
        $(document).on('click', '.detail', function () {
            layer.open({
                type: 2,
                title: '员工详情',
                shadeClose: true,
                shade: 0.8,
                area: ['25%', '60%'],
                content: 'common/detail.html' //iframe的url
            });
        });

        //外出签到 -> 详情
        $(document).on('click', '.qddetail', function () {
            layer.open({
                type: 2,
                title: '签到详情',
                shadeClose: true,
                shade: 0.8,
                area: ['35%', '87%'],
                content: 'common/qddetail.html' //iframe的url
            });
        });

        //员工管理 -> 新增/编辑
        $(document).on('click', '#additem,.edit', function () {
            layer.open({
                type: 2,
                title: '编辑员工信息',
                shadeClose: true,
                shade: 0.8,
                area: ['30%', '60%'],
                content: 'common/add.html' //iframe的url
            });
        });

        //部门维护 -> 新增/编辑
        $(document).on('click', '#adddepartment,.editdepartment', function () {
            layer.open({
                type: 2,
                title: '编辑部门信息',
                shadeClose: true,
                shade: 0.8,
                area: ['30%', '25%'],
                content: 'common/addDepartment.html' //iframe的url
            });
        });

        //管理员 -> 新增/编辑
        $(document).on('click', '#addManager,.editmanager', function () {
            layer.open({
                type: 2,
                title: '编辑管理员信息',
                shadeClose: true,
                shade: 0.8,
                area: ['30%', '40%'],
                content: 'common/addManager.html' //iframe的url
            });
        });

        //删除
        $(document).on('click', '.deleteItem', function () {
            var id = $(this).parent().attr("id");
            var type = $(this).parent().attr("class");
            if (type == 'department') {
                type = '部门';
            } else if(type == 'manager') {
                type = '管理员';
            }else{
                type = '员工';
            }
            layer.confirm('您确定要删除id为 ' + id + ' 的' + type + '数据？', {
                btn: ['确定', '取消'], //按钮
                title: '删除确认'
            }, function () {
                layer.msg('删除成功', {icon: 1, time: 1500});
                location.reload();
            });
        });



    });
</script>
</body>
</html>
